<template>
  <div class="container">
    <van-nav-bar title="我的收藏" left-arrow left-text="返回" @click-left="coe">
    </van-nav-bar>

    <div class="content img-list">
      <div v-for="(item, index) in CoeList" :key="index" class="content-item">
        <img
          :src="item.picUrl"
          style="height: 140px; margin-top: 10px"
          alt=""
          @click="coeInfo(item)"
        />
        <span
          style="
            margin-top: 5px;
            font-size: 13px;
            display: flex;
            justify-content: center;
          "
          >{{ item.name }}</span
        >
        <div style="display: flex; justify-content: center">
          <span style="color: red; font-size: 15px">{{
            "￥" + item.price
          }}</span>
        </div>

        <van-button @click="deleteCoe" type="danger"> 删除 </van-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant";
export default {
  data() {
    return {
      CoeList: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    coe() {
      this.$router.go(-1);
    },
    //收藏列表
    getData() {
      axios({
        url: "http://127.0.0.1:3000/users/list",
        method: "get",
      }).then((res) => {
        this.CoeList = res.data;
      });
    },
    //删除收藏
    deleteCoe() {
      axios({
        url: "http://127.0.0.1:3000/index/Coedelete",
        method: "get",
        params: {
          ...this.CoeList,
        },
      }).then((res) => {
        Toast.success("删除成功");
        this.getData();
      });
    },
    coeInfo(item) {
      this.$router.push({
        path: "/infoDetail",
        query: {
          ...item,
        },
      });
    },
  },
};
</script>
<style scope lang='scss'>
.container {
  background: #fafafa;

  .img-list {
    flex-wrap: wrap;
    img {
      height: 200px;
      width: 150px;
    }
  }
  .content {
    display: flex;
    width: 100%;
    .content-item {
      display: flex;
      flex-direction: column;
      width: 50%;
      // height: 250px;
      padding: 10px;
      box-sizing: border-box;
    }
  }
}
</style>